<template lang="html">
  <div>
    <!-- 头部 -->
    <box/>
    <!-- 内容 -->
    我的姓名：{{name}}
    <br>
    <a @click="changeName('defore')">call me defore</a>
    <br>
    <a @click="changeName('Tom')">call me Tom</a>
  </div>
</template>

<script>
import Event from '@/assets/script/observer'
import Box from './ob/box.vue'

export default {
  data () {
    return {
      name: ""
    }
  },
  methods: {
    changeName(name) {
      Event.trigger("change", name);
    }
  },
  mounted() {
    var self = this;
    var body = (function () {
      Event.listen("change", function (data) {
        self.name = data;
        body.changeName(data);
      })
      return {
        changeName: function (data) {
          self.name = data;
        }
      }
    })();
  },
  components: {
    Box
  }
}
</script>

<style lang="scss">
</style>
